const Star = Vue.defineComponent({
    props: {
        value: {
            type: Number,
            default: 0 // 默认值为 0
        }
    },
    data() {
        return {
            hoverIndex: 0 // 当前悬停的星星索引
        };
    },
    computed: {
        // 根据 hoverIndex 和 value 动态计算星星的显示状态
        starImages() {
            return Array.from({ length: 5 }, (_, i) => ({
                src: i < this.hoverIndex || i < this.value ? 'images/star.png' : 'images/star-off.png',
                alt: 'star'
            }));
        },
        // 计算总分
        totalScore() {
            return this.value * 10; // 每个星星代表 10 分
        }
    },
    methods: {
        // 更新评分
        updateRate(index) {
            this.$emit('update:value', index); // 触发事件更新父组件的 value
        }
    },
    template: `
        <div class="star-container">
            <ul class="star">
                <li v-for="(star, i) in starImages" :key="i"
                    @mouseenter="hoverIndex = i + 1"
                    @mouseleave="hoverIndex = 0"
                    @click="updateRate(i + 1)">
                    <img :src="star.src" :alt="star.alt">
                </li>
            </ul>
            <span class="score">{{ totalScore }} 分</span>
        </div>
    `
});